<template>
  <div class="main">
        <div class="main_box">
          <ul class="mui-table-view">
            <div class="clear"></div>
            <li  class="mui-table-view-cell mui-media" v-for="(todo) in todos" :key="todo.g_num_iid" >
              <div class="list">
                <div class="image" @click="open(todo.g_num_iid)">
                  <img v-lazy="todo.g_img_thumb" class="sb_pic fl">
                </div>                 
                        <div class="sb_r fl" @click="open(todo.g_num_iid)">
    
                            <h5>{{todo.g_title}}</h5>
    
                            <div class="sb_b">
    
                                <div class="fl">
                                    <p class='mui-ellipsis'>
        
                                   <span class="price">￥{{todo.g_quanhou/100}}</span>
      
                                    <span class="price_under">￥{{todo.g_min_group_price/100}}</span>
        
                                </p>
   
                                <div class="quan">
                                    <img class="quan_pic fl" src="/static/img/bg_ticket.png">
                                    <span class="quan_price">￥{{todo.g_coupon_discount/100}}</span>
                                </div>
                                <p>已拼{{todo.g_sold}}单</p>
                                </div>
                                
        
                            </div>
    
                        </div>   
                        <div class="share  fr">
                                    <img class="share_pic" src="/static/img/share.png">
                                    <p>分享赚￥{{todo.g_zhuansheng}}</p>
                                </div> 
              </div>  
              <div class="clear"></div>            
            </li>
          </ul>
        </div>
      </div>
</template>

<script>
import { Toast } from "mint-ui";
import { mapState, mapMutations, mapGetters } from "vuex";
export default {
  name: "SuperContainer",
  props: {
    todos: Array,
    page:1
  },
  methods: {
    open: function(id) {
      this.$router.push({ 
          path: "goodDetail", 
          query: {
               num_iid: id,
            //    img:img,
            //    title:title
                } });
    }
  }
};
</script>

<style lang="stylus" scoped>
.clear{
  clear: both;
}
.tuijian{
  float: left;
  width :50%;
}
.remai{
  float: left;
  width :50%;
}
p{
  font-size 14px;
  color :#000;
}
.fl{
  float: left;
}
.fr{
  float: right;
}
.main_box li{
  margin-top: 5px;
  overflow hidden;
}
.lunbo{
    position: relative;
}
.search{
    position: absolute;
    top: 0;
    z-index: 4;
    width: 80%;
    border-radius: 5px;
}
.mui-table-view {
		li {
			h1 {
				font-size: 14px;
			}
			.mui-ellipsis {
				font-size: 12px;
				color: #226aff;
				display: flex;
				justify-content: space-between;
			}
		}
	}
.sb_r{
    margin-right: .2rem;
    width 30%;
}
.share{
    width 27%
    text-align center
    margin-top .45rem
    border-left 1px solid rgba(0,0,0,0.05)
}
.share_pic{
  width 1rem
  height 1rem
  margin-bottom .2rem
}
.quan_pic{
    width: 1.8rem;
    height: .8rem;
    margin-right: 10px;
    margin-bottom: 5px;
}
.sb_pic{
    width: 25%
    height 25%
    margin-right: .2rem;
}
span{
    font-size: .3rem;
    color: #000;
}
.quan{
    position: relative;
    margin-top: .18rem;
}
.quan_price{
    position: absolute;
    top: .2rem;
    z-index: 0;
    left: .9rem;
}
.price_under{
    text-decoration: line-through;
    color: #999;
    font-size: .2rem;
}
h5{
  width :6.8rem
  overflow: hidden;
  text-overflow :ellipsis;
  white-space: nowrap;
    font-size: .32rem;
    color: #000;
}
.main h2 {
  display: block;
  height: 1.3rem;
  background: white;
  font-size: 0.35rem;
  line-height: 1.3rem;
  padding-left: 0.3rem;
}
.mint-swipe {
    
        height: 200px;
    
        .mint-swipe-item {
    
            &:nth-child(1) {
    
                background-color: red;
    
            }
    
            &:nth-child(2) {
    
                background-color: blue;
    
            }
    
            &:nth-child(3) {
    
                background-color: cyan;
    
            }
    
            img {
    
                width: 100%;
    
                height: 100%;
    
            }
    
        }
    
    }
    
    
    
    .mui-grid-view.mui-grid-9 {
    
        background-color: #fff;
    
        border: none;
    
        margin-top: 22px;
    
        img {
    
            width: 50px;
    
            height: 50px;
    
        }
    
        .mui-media-body {
    
            font-size: 13px;
    
        }
    
    }
    
    
    
    .mui-grid-view.mui-grid-9 .mui-table-view-cell {
    
        border: 0;
    
    }
</style>